<template>
    <div ref="wrapper">
        <div class="content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
    name: 'Scroll',
    props: {
        probeType: {
            type: Number,
            default: 0
        },
        pullUpLoad: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            scroll: null
        }
    },
    methods: {
        scrollTo(x, y, time = 1000) {
            this.scroll.scrollTo(x, y, time)
        },
        finishPullUp(){
            this.scroll.finishPullUp()
        },
        refresh() {
            this.scroll.refresh()
            // console.log('----------')
        },
        getScrollY(){
            return this.scroll ? this.scroll.y : 0
        }
    },
    mounted() {
        this.scroll = new BScroll(this.$refs.wrapper, {
            // 为false时，只有button元素可以发生点击事件；为true时，其他元素也可以发生点击事件
            click: true,
            probeType: this.probeType,
            pullUpLoad: this.pullUpLoad
        })
        this.scrollTo(0, 0)
        if (this.probeType === 2 || this.probeType === 3) {
            this.scroll.on('scroll', (position) => {
                this.$emit('scroll', position)
            })
        }
        if (this.pullUpLoad) {
            this.scroll.on('pullingUp', (position) => {
                this.$emit('pullingUp')
            })
        }
    }
}
</script>

<style scoped>
</style>